<template>
	<div class="layout">
		<img :src="props.img" alt="">
		<span class="userName">{{ props.userName }}</span>
	</div>
</template>

<script setup>

const props = defineProps({
	userName:String,
	img:String
})
console.log(props);

</script>

<style lang="scss" scoped>
.layout {
	width: 300px;
	height: 60px;
	border: 3px solid rgb(70, 70, 70);
	background: repeating-linear-gradient(to bottom,rgb(50,50,50),rgb(20,20,20));
	border-radius: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	img {
		position: relative;
		top: -15px;
		flex: 1;
		height: 60px;
		width: 60px;
		border-radius: 100px;
		border: 2px solid black;
	}

	.userName {
		position: relative;
		top: -15px;
		font-size: 20em;
		font-family: "zzz-font";
		color: #fff;
	}
}
</style>